<template>
  <div class="standard">
    <div class="head">
      <div>学科：{{ subjectName }}</div>
      <div class="class-time">上课时间：{{ listData.startDate }}</div>
    </div>
    <div class="content">
      <div class="tip"> 暂未设置教学计划,可以选择教学计划或直接上传文档备课</div>
      <div class="navigation">
        <div class="list"><img src="\src\assets\one-prepare\prepare-tip1.png" alt="" width="230" height="167"><el-button @click="chiocePlan">选择标准教学计划</el-button></div>
        <div class="list"><img src="/src/assets/one-prepare/prepare-tip2.png" alt="" width="230" height="167"><el-button @click="chioceOtherPlan">选择其他学生教学计划</el-button></div>
        <div class="list"><img src="/src/assets/one-prepare/prepare-tip3.png" alt="" width="230" height="167"><el-button @click="directPrepare">直接备课</el-button></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, Ref } from 'vue';
import $ from '$'
import ChiocePlanComponent from './chioce-plan.vue'
import ChioceOtherPlanComponent from './chioce-other-plan.vue'
import store from './../../store';
import { ElMessage } from 'element-plus';
export default {
  props: {
    listData: {
      type: Object,
      default: () => ({})
    }
  },
  setup (props, { emit }) {
    let subjectId = ref()
    $.emitter.emit('effect', (id) => subjectId.value = id)
    let subjectName = ref($.storage.get('subject').name)
    const chiocePlan = () => {
      let title = $.element('div', {}, [
        $.element('span', {}, '选择教学计划课次添加'), 
        $.element('i', { style: { color: '#FF3D3D', fontSize: '14px' } }, '（' + subjectName.value + ')')
      ])
      $.modal.create({ title, width: 505, zIndex: 2015, bodyStyle: { padding: '0' }, component: ChiocePlanComponent, props: { subjectId: subjectId.value } }).then((res) => {
        if (res) {
          console.log(props.listData)
          res[0].map(item => {
            item.planId = res[1]
            item.lessonId = props.listData.type === 1 ? props.listData.contractId : props.listData.lessonId 
          })
          $.http.json('/admin/lessonTimes/save', res[0]).then(data => {
            data.result && ($.emitter.emit('standard-init'),ElMessage.success('添加教学计划成功！'))
          })
        }
      })
    }
    const chioceOtherPlan = () => {
      $.modal.create({ 
        title: '选择学生教学计划', 
        width: 505, 
        zIndex: 2015, 
        bodyStyle: { padding: '0' }, 
        component: ChioceOtherPlanComponent, 
        props: { subjectId: subjectId.value } 
      }).then((res) => {
        if (res) {
          res[0].map(item => {
            item.planId = res[1]
            item.lessonId = props.listData.type === 1 ? props.listData.contractId : props.listData.lessonId 
          })
          $.http.json('/admin/lessonTimes/save', res[0]).then(data => {
            if (data.result) {
              $.emitter.emit('standard-init')
              ElMessage.success('添加教学计划成功！')
            }
          })
        }
      })
    }
    const directPrepare = () => {
      store.commit('set_direct_class', true)
      emit('stepChange', 1)
    }
    return { chiocePlan, subjectId, subjectName, chioceOtherPlan, directPrepare }
  }
}
</script>
<style lang="scss" scoped> 
  .standard {
    position: relative;
    height: 100%;
    min-height: 500px;
    .head {
      color: #999999;
      display: flex;
      margin-bottom: 20px;
      .class-time {
        margin-left: 20px;
      }
    }
    .content {
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      padding: 0 70px;
      width: 100%;
      .tip {
        width: 500px;
        font-size: 30px;
        color: #333333;
        line-height: 42px;
        text-align: center;
        font-weight: 500;
        margin: 0 auto;
      }
      .navigation {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        .list {
          display: flex;
          align-items: center;
          flex-direction: column;
        }
        button {
          margin-top: 40px;
          color: #72b22a;
          border: 1px solid #72b22a;
          &:hover {
            color: #fff;
            background: #72b22a;
          }
        }
      }
    }
  }
</style>